<!--
 * @Author: cqg
 * @Date: 2021-04-26 10:31:49
 * @LastEditTime: 2021-06-04 17:52:37
 * @Description: file content
 * @LastEditors: cqg
-->
<template>
  <basic-container>
    <dataList ref="dataList" placeholder="请输入承租方或物业名称或合同编号" :pageInfo="pager" :listData="tableData" searchName="propertyNames" :menuList="[]" :filterList="filterList">
      <el-table :data="tableData" align="left">
        <el-table-column label="物业名称" prop="propertyNames" min-width="240" show-overflow-tooltip />
        <el-table-column label="合同编码" prop="contractCode" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.contractCode}}
            <img :src="NewIcon" class="imgIcon" v-if="scope.row.status == '01'" />
          </template>
        </el-table-column>
        <el-table-column label="承租方" prop="customerName" min-width="200" show-overflow-tooltip />
        <el-table-column prop="status" label="合同状态" width="160">
          <template slot-scope="scope">{{scope.row.status | dict("rent_contract_status")}}</template>
        </el-table-column>
        <el-table-column label="合同签订日期" prop="signDate" width="200" />
        <el-table-column width="200" label="租赁周期" prop="startTime">
          <template slot-scope="scope">{{ scope.row.startDate }}至{{scope.row.endDate}}</template>
        </el-table-column>
        <el-table-column width="200" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleBtnClick('view',scope.row)">查看</el-button>
            <el-button type="text" @click="handleBtnClick('print',scope.row)">入驻通知打印</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
    <contract-view ref="contractView" />
    <el-dialog title="打印" :visible.sync="printDialogVisible" append-to-body>
      <section ref="printTemplate" id="printTemplate" style="font-family: serif;" class="printBox">
        <h1 class="title">入驻通知书</h1>
        <p>
          <span style="min-width:4em;">{{printData.manager||''}}</span> ：
        </p>
        <p class="printP">
          现有承租方
          <span style="min-width:4em;">{{ printData.rentContract?printData.rentContract.customerName:''}}</span>
          租赁
          <span style="min-width:1em; text-align:center;" v-for="(item,index) in printData.rentContract.propertyNames" :key="index">{{ item}}</span>物业，建筑面积
          <span>{{printData.rentContract?printData.rentContract.buildingArea:''}}</span>
          平方米，合同期限自
          <span style="min-width:2em;">{{printData._startYear||''}}</span>年
          <span style="min-width:1em;">{{printData._startMonth||''}}</span></span>月
          <span style="min-width:1em;">{{printData._startDay||''}}</span></span>日至
          <span style="min-width:2em;">{{printData._endYear||''}}</span>年
          <span style="min-width:1em;">{{printData._endMonth||''}}</span>月
          <span style="min-width:1em;">{{printData._endDay||''}}</span>日，
          请予办理入驻手续，并按规定收取物业管理费等相关费用。
        </p>
        <p class="printP">
          承租方联系人：
          <span style="min-width:2em;">{{printData.clientLesseeLinkinfo.name||''}}</span>，
          联系电话：
          <span style="min-width:3em;">{{printData.clientLesseeLinkinfo.phone||''}}</span>。
        </p>
        <p class="rightP sealTitle">深圳市福田区政府物业管理中心
        <img src="@/assets/images/seal.gif" alt="" class="seal">
        </p>
        <p class="rightP">
          <span style="min-width:3em;">{{new Date().getFullYear()}}</span>年
          <span style="min-width:1em;">{{new Date().getMonth()+1}}</span>月
          <span style="min-width:1em;">{{new Date().getDate()}}</span>日
        </p>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button @click="printDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="print">确 定</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import {
  fetchList, getRentContractPageList
} from "../api/rent-contract.js";
import contractView from "@/views/wy-rent/contract/view.vue";
import printJS from "print-js";
export default {
  name: "contract-manage",
  components: { contractView },
  provide () {
    return {
      initList: this.getListData
    };
  },
  mounted () {
    this.getListData();
  },
  data () {
    return {
      printData: {
        clientLesseeLinkinfo:{},
        rentContract:{}
      },
      //打印弹窗控制
      printDialogVisible: false,
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 10,
        category: 1,
        propertyNames: "",
        status:['03']
      },
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      },
      // 页面loading
      loading: false,
      filterList: [
        {
          label: "合同类型",
          inputType: "dict",
          dictName: "rent_contract_type",
          name: "type",
          multiple: true
        },
        {
          label: "合同细类",
          inputType: "dict",
          dictName: "rent_contract_sub_type",
          name: "subType",
          multiple: true
        },
        {
          label: "合同状态",
          inputType: "dict",
          dictName: "rent_contract_status",
          name: "status",
          multiple: true,
          defaultValue: ["03"]

        },
        {
          label: "合同签订日期",
          inputType: "daterange",
          name: ["signDateStart", "signDateEnd"]
        },
        {
          label: "合同结束日期",
          inputType: "daterange",
          name: ["endDateStart", "endDateEnd"]
        },
        {
          label: "起租日期",
          inputType: "daterange",
          name: ["rentStartDateStart", "rentStartDateEnd"]
        },
        {
          label: "租赁周期",
          inputType: "daterange",
          name: ["startDate", "endDate"]
        },
        {
          label: "统计类别",
          inputType: "select",
          name: "warningType",
          children: [
            { label: "即将到期", value: "01" },
            { label: "待续签", value: "02" },
            { label: "本月新签", value: "03" },
            { label: "本月终止", value: "04" },
            { label: "执行中", value: "05" },
            { label: "已终止", value: "06" }
          ],
          multiple: false
        }
      ],
      NewIcon: require("@/assets/images/new.png")
    };
  },

  computed: {
    printStyle () {
      return `
	@page { 
			margin: 0 0 1.2cm;size: auto;
  }
	#printTemplate {
  	padding:40px;

 }
   .title {
    font-size: 35px;
    font-family: "宋体";
    text-align: center;
    color: black;
  }
  p {
    font-size: 25px;
    line-height: 35px;
    color: black;
  }
  .printP {
    text-indent: 2em;
    font-family: "仿宋";
  }
  .rightP {
    text-align: right;
  }

  span {
   text-indent: 0em;
    display: inline-block;
    position: relative;
  }
  span:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -10;
    left: 0;
    width: 100%;
    height: 1px;
    background: black;
  }
  .sealTitle{
    position: relative;
    } 
  .seal{
    position: absolute;
     right:45px;bottom:-75px;
     }
  `
    },
  },

  methods: {
    getListData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      fetchList(requestData)
        .then(res => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 操作监听
    handleBtnClick (type, row) {
      switch (type) {
        case "view":
          this.$refs.contractView.show(row.rentContractId);
          break;
        case "print":
          this.judgeState(row)
          break;
      }
    },
    //打印操作时根据Id判断当前该数据是否可以打印
    async judgeState (row) {
      let rps = await getRentContractPageList(row.rentContractId)
      if (rps.data.data.checkInStatus == 0) {
        this.printDialogVisible = true
        this.$nextTick(() => {
          const { rentContract,clientLesseeLinkinfo,manager } = rps.data.data
          let {startDate,endDate} = rentContract
          this.printData = {
            manager,
            clientLesseeLinkinfo,
            rentContract,
            _startYear: startDate ?startDate.split('-')[0] : '' ,
            _startMonth:startDate ?startDate.split('-')[1] : '' ,
            _startDay:startDate ?startDate.split('-')[2] : '' ,
            _endYear: endDate ? endDate.split('-')[0] : '',
            _endMonth:endDate ? endDate.split('-')[1]: '',
            _endDay:endDate ? endDate.split('-')[2] :'',
          }
        })
      } else { this.$message.error(rps.data.data.checkInMsg); }
    },
    //打印
    print () {
      printJS({
        printable: "printTemplate",
        type: "html",
        frameId: "printFrame",
        style: this.printStyle,
        scanStyles: false,
        targetStyles: ["*"],
        headerStyle: 'color:#f0000;',
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.resource-manage {
  display: grid;
  grid-template-columns: 216px 1fr;
  column-gap: 16px;
  padding: 16px 24px;

  .sort-tree {
    background-color: white;
  }

  .right-content {
    .amount-wrap {
      display: flex;
      background-color: white;
      margin-bottom: 16px;

      .item {
        width: 82px;
        height: 51px;
        margin: 10px 0;
        flex-direction: column;
        border-right: 1px solid #ccc;

        .value {
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
}

.imgIcon {
  width: 28px;
  height: 26px;
  margin-left: 10px;
}
#printTemplate {
  width: 100%;
  .title {
    font-size: 24px;
    font-family: "宋体";
    text-align: center;
    color: black;
  }

  p {
    font-size: 25px;
    line-height: 35px;
    color: black;
  }
  .printP {
    text-indent: 2em;
    font-family: "仿宋";
  }

    span {
       text-indent: 0em;
    display: inline-block;
    position: relative;
  }
  span:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -10;
    left: 0;
    width: 100%;
    height: 1px;
    background: black;
  }

  .rightP {
    text-align: right;
  }
    .sealTitle{
    position: relative;
    } 
  .seal{
    position: absolute;
     right:45px;bottom:-50px;
     }
}
</style>